<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
	<head>
		<meta charset="UTF-8">
		<title>Title</title>
		<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
		<link rel="stylesheet" href="https://kauizhaotan.oss-cn-shanghai.aliyuncs.com/VotingSystem/css/materialize.min.css"type="text/css">
		<link rel="stylesheet" href="/css/me.css" type="text/css">
		<script type="text/javascript" src="https://kauizhaotan.oss-cn-shanghai.aliyuncs.com/VotingSystem/js/jquery.js" charset="UTF-8"></script>
		<script type="text/javascript" src="https://kauizhaotan.oss-cn-shanghai.aliyuncs.com/VotingSystem/js/materialize.min.js" charset="UTF-8"></script>
		<script type="text/javascript" src="https://kauizhaotan.oss-cn-shanghai.aliyuncs.com/VotingSystem/js/echarts.min.js" charset="UTF-8"></script>
		
		
		<div class="section">
	</head>
	<body>
		</div>
		<div th:replace="common::root_navbar(1)"></div>
		<div class="container">
				<nav class="teal lighten-2">
					<div class="nav-wrapper" style="margin-left: 25px;">
						<div class="col s12">
							<a th:href="@{/root/channel}" class="breadcrumb">全部频道</a>
							<a class="breadcrumb" href="#" id="bread-title">频道结果汇总管理</a>
						</div>
					</div>
				</nav>
			</div>
			<div  class="card-panel">
				<blockquote>
					问题趋势
				</blockquote>
				<div class="row" >
					<div style="background-color: rgba(255,255,255,0.2)">
						<div id="trend" style="width: 100%;height:400px;"></div>
					</div>
				</div>
				<blockquote>
					所有问题
				</blockquote>
				<div class="row ">
					<div id="chart-container" hidden>
					</div>
				</div>
			</div>
			<!--底部按钮开始-->
			<div class="row center-align">
				<a class="btn-floating btn-large green lighten-2 modal-trigger tooltipped" href="#modal1"  data-position ="left"  data-tooltip="添加问题" >
					<i class="label material-icons">add</i>
				</a>
				<a class="btn-floating btn-large blue lighten-2 tooltipped" data-position="right" data-tooltip="保存频道" id="channelSave">
					<i class="label material-icons">check</i>
				</a>
			</div>
			<!--底部按钮结束-->

		</div>


		<input id="channelJson" th:value="${channel}" hidden>
		<div th:replace="common::footer"></div>

		<script type="text/javascript" th:inline="javascript">

            let channel = JSON.parse($("#channelJson").val());
            let charText = "";

			$("#bread-title").text(channel.title + "投票的结果")
            for(let i = 0; i < channel.votes.length; ++i){
                charText += "\t\t\t\t\t<div class=\"col s6 l6 card-panel\">\n" +
                    "\t\t\t\t\t\t<div id=\"main-" + i+ "\" style=\"width: 100%;height:400px;\"></div>\n" +
                    "\t\t\t\t\t</div>"

            }
            var trendChart = echarts.init(document.getElementById('trend'));
            $.ajax({
                url: "/result/trend/" + channel.id,
                type: "get"
            }).done(function (data) {
                if(data.code === 200){
                    let mp  = JSON.parse(data.message);
                    let voteData = new Array();
                    for(let k of Object.keys(mp)){
                        let item = [k,mp[k]];
                        voteData.push(item);
                    }
                    voteData.sort(function (a,b) {
                        return a[0] > b[0] ? 1 : -1;

                    })
                    let option = {
                        title: {
                            text: '该频道下本月投票量趋势',
                            left: 'center'
                        },
                        tooltip: {
                            trigger: 'axis',
                        },
                        xAxis: {
                            type: 'time',
                            splitLine: {
                                show: true
                            },
                            axisLabel:{
                                formatter: function (value) {
                                    return echarts.format.formatTime("yyyy/MM/dd", new Date(value));
                                }
                            }
                        },
                        yAxis: {
                            type: 'value',
                            boundaryGap: [0, '100%'],
                            splitLine: {
                                show: true
                            }
                        },
                        series: [{
                            name: '投票量',
                            type: 'line',
                            showSymbol: false,
                            hoverAnimation: true,
                            data: voteData,
                            smooth: true
                        }]
                    };
                    trendChart.setOption(option)


                }
            })



            $("#chart-container").after(charText);
            for(let i = 0; i < channel.votes.length; ++i) {
                let myChart = echarts.init(document.getElementById('main-' + i));
                let chartData = new Array();
                let vote = channel.votes[i];
                for(let j = 0; j < vote.voteOptionsList.length; j++){
                    let item = {
                        "value" :  vote.voteOptionsList[j].totalVoting,
                        "name"  :  vote.voteOptionsList[j].optionsInfo
                    }
                    chartData.push(item);
                }
                myChart.setOption({
                    title: {
                        top: 20,
                        text: vote.title,
                        // subtext: "投票总人数：" + channel.votingNum,
                        left: 'center'
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: '{a} <br/>{b} : {c} ({d}%)'
                    },
                    series : [
                        {
                            name : vote.title,
                            type: 'pie',
                            radius : '55%',
                            center: ['50%', '50%'],
                            selectedMode: 'single',
                            data: chartData
                        }
                    ],
	                  emphasis: {
                          itemStyle: {
                              shadowBlur: 10,
                                  shadowOffsetX: 0,
                                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                          }
                      }
                })

            }
		</script>


	</body>
</html>